<template>
    <view class="xilu">
        <!--  -->
        <view class="page-foot bg-white">
            <view class="flex-box plr30 fs30">
                <view class="col5">合计：</view>
                <view class="fs40 flex-grow-1 red"><text class="fs24">¥</text>{{order.pay_price}}</view>
                <view class="btn1" @click="buy()">立即购买</view>
            </view>
        </view>
        <!--  -->
        <view class="container">
            <!--  -->
            <view class="xilu_address bg-white p30 mb30" v-if="order.order_type==1">
                <view class="flex-box flex-between pb20">
                    <view class="fs34 col10 fwb">收货地址</view>
                    <view class="flex-box xilu_address_list" @click="bindAddress()">地址薄</view>
                </view>
				<view v-if="order.address">
					<view class="fs34 col10 pb20 fwb">{{order.address.Area.province+order.address.Area.city+order.address.Area.region+order.address.address}}</view>
					<view class="fs30 col5">
						<text>{{order.address.name}}</text>
						<text class="pl30">{{order.address.mobile}}</text>
					</view>
				</view>
            </view>
            <!--  -->
            <view class="xilu_goods bg-white p30 mb30 fwb">
                <view class="fs34 col10 pb10">商品信息</view>
                <view class="flex-box" v-for="(item,index) in order.productList">
                    <image :src="item.thumb_image_text" mode="aspectFill" class="xilu_goods_pic"></image>
                    <view class="pl30 flex-grow-1 flex-between flex-col flex-box flex-align-start">
                        <view class="m-ellipsis-l2 fs30 ">{{item.name}}</view>
                        <view class="red fs40"><text class="fs24">¥</text>{{item.salesprice}}</view>
                    </view>
                </view>
            </view>
            <!--  -->
            <view class="xilu_order bg-white p30">
                <view class="fs34 col10 fwb">商品信息</view>
                <view class="pt30 flex-box flex-between fs30">
                    <view class="col5">商品金额</view>
                    <view class="red"><text class="fs24">¥</text>{{order.total_price}}</view>
                </view>
                <view class="pt30 flex-box flex-between fs30">
                    <view class="col5">运费</view>
                    <view class="red"><text class="fs24">¥</text>{{order.freight_price}}</view>
                </view>
                <view class="pt30 flex-box flex-between fs30">
                    <view class="col5">支付方式</view>
                    <image src="../../static/icon/placeorder_wechat.png" mode="aspectFill" class="wechat"></image>
                    <view class="col10">微信支付</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				productId: 0,
				addressId:0,
				order:{}
            };
        },
		onLoad(options) {
			this.productId = options.product_id || 0;
			this.fetchOrder();
		},
		
		methods:{
			fetchOrder(){
				this.$core.post({url: 'xilumarket.order/sure',data: {ids: this.productId,address_id:this.addressId},loading: true,success: ret => {
						this.order = ret.data;
					},fail: err => {
						uni.showModal({
							title:'提示',
							content: err.msg,
							showCancel: false,
							success() {
								uni.navigateBack()
							}
						})
						return false;
					}
				});
			},
			bindAddress(){
				let page = this;
				uni.navigateTo({
					url: '/pages/address_list/address_list?from_place=order',
					events:{
						chooseAddress:function(data){
							page.addressId = data.addressId;
							page.fetchOrder();
						}
					}
				})
			},
			buy(){
				if(this.order.order_type==1&&!this.order.address){
					uni.showToast({title: '请选择地址',icon: 'none'});
					return false;
				}
				this.$core.post({url: 'xilumarket.order/create_order',data: {ids: this.productId,address_id:this.order.address?this.order.address.id:0},loading: true,success: ret => {
					//下单成功，前往收银台
						uni.redirectTo({
							url: '/pages/pay_action/pay_action?order_id='+ret.data.id
						})
					},fail: err => {
						console.log(err);
					}
				});
			}
		}
    }
</script>

<style lang="scss" scoped>
    .container {
        background-color: #F7F9FD;
        padding-left: 30rpx;
        padding-right: 30rpx;
        padding-top: 30rpx;
    }

    .xilu {

        &_address,
        &_goods,
        &_order {
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;

            &_list {
                color: #004794;

                &::after {
                    width: 35rpx;
                    height: 35rpx;
                    display: block;
                    content: "";
                    background: url(@/static/icon/placeorder_right.png) no-repeat center;
                    background-size: 100%;
                    margin-left: 10rpx;
                }
            }
        }

        &_goods_pic {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;

            &+.flex-box {
                height: 180rpx;
            }
        }

        .wechat {
            width: 30rpx;
            height: 30rpx;
            margin-left: auto;
            margin-right: 15rpx;
        }
    }

    .page-foot {
        .flex-box {
            height: 100rpx;
        }
        .btn1{
            width: 200rpx;
            height: 80rpx;
            line-height: 80rpx;
        }
    }
</style>
